import React, { useRef, useEffect } from "react";
import {
    Scene, WebGLRenderer, BoxGeometry, MeshNormalMaterial, Mesh,
    Matrix4, Vector3, PerspectiveCamera, Object3DEventMap, Light, DirectionalLight, MeshPhongMaterial, MeshBasicMaterial,
    CircleGeometry, PlaneGeometry, RingGeometry, ShapeGeometry, Shape,
} from 'three';
import "./css/ResponsiveDesign.css"
import { vs, fs } from './shader/color'
import Poly from "../component/Poly";

const canvas = document.createElement("canvas");

const poly = new Poly(canvas);
await poly.init();

// poly.loadShader({
//     shaderName: 'color',
//     vs: vs, fs: fs,
//     attribs: [{
//         size: 'float32x3',
//         location: 0,
//     }],
//     unifroms: [],
//     mode: 'triangle-list'
// })



// const vertices = new Float32Array([
//     -0.1, 0.1, 0.0,
//     -0.1, -0.1, 0.0,
//     0.1, -0.1, 0.0,

//     -0.1, 0.1, 0.0,
//     0.1, -0.1, 0.0,
//     0.1, 0.1, 0.0,
// ]);



// poly.setAttrib('color', [
//     { location: 0, array: vertices, }
// ]);

// poly.draw(6);


let loadIndex = 0;
const RenderStructure = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const { current } = divRef;
        if (current != null) {
            current.innerHTML = '';
            current.append(canvas);
        }
    }, []);
    return (
        <div ref={divRef}></div>
    );
};

export default RenderStructure;
